<template>
  <a-modal
      title="编辑用户"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
      @ok="handleOk"
  >
    <dynamic-form ref="dynamicForm" :fields="fields" :dynamic-validate-form="dynamicValidateForm" />
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue'
import {Modal} from 'ant-design-vue'
import {editSchema} from "./edit-schema"
import {useAsync} from "@/hooks"
import DynamicForm from '@/components/dynamic-form/dynamic-form.vue'
import {userUpdate} from "@/api/user"

export default defineComponent({
  name: "edit-modal",
  components: { [Modal.name]: Modal, DynamicForm},
  props: {
    remove: { // 移除模态框
      type: Function
    },
    fields: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  setup(props) {
    const dynamicForm = ref<any>(null)

    const state = reactive({
      visible: true,
      confirmLoading: false,
      dynamicValidateForm: editSchema
    })

    const handleOk = () => {
      state.confirmLoading = true
      dynamicForm.value.validate()
          .then( async res => {
            const pramKeys = ['account','email','password','roleid','tel','typeValue','userid','username']
            const params = {}
            pramKeys.forEach(key => params[key] = dynamicForm.value.modelRef[key])
            //params.roleid = dynamicForm.value.modelRef.roleids.map(item => item.key)
            const result = await useAsync(userUpdate(params), {ref: state, loadingName: 'confirmLoading'})
            props.callback && props.callback()
            state.visible = false
          })
          .catch(err => {
            console.log('error', err)
            state.confirmLoading = false
          })
    }

    return {
      ...toRefs(state),
      handleOk,
      dynamicForm,
    }
  }
})
</script>

<style scoped>
</style>
